<template>
  <div class="login-content">
    <LoginForm @on-success-valid="handleSubmit"></LoginForm>
  </div>
</template>
<script>
import LoginForm from "@/components/common/loginForm.vue";
import { mapActions } from "vuex";

export default {
  inject: ["reload"],
  components: {
    LoginForm,
  },
  methods: {
    ...mapActions(["handleLogin", "getUserInfo"]),
    handleSubmit({ username, password, authCode }) {
      this.handleLogin({ username, password, authCode }).then((res) => {
        this.getUserInfo().then((res) => {
          if (this.$route.query.redirect) {
            let redirect = this.$route.query.redirect;
            this.$router.push(redirect);
          } else {
            this.$router.push("/home");
          }
          this.reload();
        });
      });
    },
  },
};
</script>
<style scoped>
.login-content {
  background-image: url("../../assets/images/elaine-casap-qgHGDbbSNm8-unsplash.jpg");
  background-color: #1f798f;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: calc(100% - 56px);
}
</style>

